<template>
	<view class="border-top">
		<uni-calendar :insert="true" :lunar="false" @monthSwitch="monthSwitch" :selected="selected" :showMonth="false"
			@change="change" />
		<view class="px-25 mt-2" @click="open()">
			<view class="card px-3 flex align-center justify-between" style="height: 80rpx;">
				<view class="flex align-center">
					<view class="rounded-circle mr-2" style="width: 20rpx;height: 20rpx;background-color: #97C0FC;">
					</view>
					<view class="color999 font24 font-weight-500">正常上学</view>
				</view>
				<view class="flex align-center">
					<view class="rounded-circle mr-2" style="width: 20rpx;height: 20rpx;background-color: #4FDAA1;">
					</view>
					<view class="color999 font24 font-weight-500">请假</view>
				</view>
				<view class="flex align-center">
					<view class="rounded-circle mr-2" style="width: 20rpx;height: 20rpx;background-color: #FFA76C;">
					</view>
					<view class="color999 font24 font-weight-500">迟到</view>
				</view>
				<view class="flex align-center">
					<view class="rounded-circle mr-2" style="width: 20rpx;height: 20rpx;background-color:#FF7575;">
					</view>
					<view class="color999 font24 font-weight-500">早退</view>
				</view>
			</view>
		</view>
		<view class="px-25 mt-2">
			<view class="card px-2" v-if="showList != ''">
				<view class="flex align-center border-bottom justify-between" style="height: 65rpx;">
					<view class="color999 font26 font-weight-500">考勤信息</view>
					<view class="color999 font26 font-weight-500">{{ day }}</view>
				</view>
				<view class="py-2">
					<view class="flex justify-between" v-for="(item, index) in showList" :key="index">
						<view class="color333 font26 font-weight-500">{{ item.description }}</view>
						<view class="color333 font26 font-weight-500">{{ item.time }}</view>
					</view>
					<view class="flex align-center justify-end" style="height: 80rpx;">
						<view class="flex align-center" v-if="dayStatus == '1'">
							<view class="rounded-circle mr-2"
								style="width: 20rpx;height: 20rpx;background-color: #97C0FC;"></view>
							<view class="color999 font24 font-weight-500">正常上学</view>
						</view>
						<view class="flex align-center" v-if="dayStatus == '2'">
							<view class="rounded-circle mr-2"
								style="width: 20rpx;height: 20rpx;background-color: #4FDAA1;"></view>
							<view class="color999 font24 font-weight-500">请假</view>
						</view>
						<view class="flex align-center" v-if="dayStatus == '3'">
							<view class="rounded-circle mr-2"
								style="width: 20rpx;height: 20rpx;background-color: #FFA76C;"></view>
							<view class="color999 font24 font-weight-500">迟到</view>
						</view>
						<view class="flex align-center" v-if="dayStatus == '4'">
							<view class="rounded-circle mr-2"
								style="width: 20rpx;height: 20rpx;background-color:#FF7575;"></view>
							<view class="color999 font24 font-weight-500">早退</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
	export default {
		components: {
			uniCalendar
		},
		data() {
			return {
				date: new Date().toISOString().slice(0, 7),
				day: new Date().toISOString().slice(0, 10),
				selected: [],
				showList: [],
				dayStatus: ''
			};
		},
		methods: {
			
			change(e) {
				console.log(e);
				this.day = e.fulldate;
				this.getList();
			},
			monthSwitch(e) {
				console.log(e);
				let month = e.month;
				if (e.month < 10) {
					month = '0' + month;
				}
				this.date = e.year + '-' + month;
				this.getData();
			},
			getData() {
				let this_ = this;
				let opts = {
					url: 'Jz/SearchKq.shtml'
				};

				let param = {
					user_id: uni.getStorageSync('classUserId'),
					date: this_.date
				};
				this_.$http.httpRequest(opts, param).then(
					res => {
						console.log(res.data);
						this_.selected = res.data.data;
						this_.getList();
					},
					error => {
						console.log(error);
					}
				);
			},
			getList() {
				let this_ = this;
				this_.showList = [];
				this_.dayStatus = '';
				for (let i = 0; i < this_.selected.length; i++) {
					console.log(this_.selected[i].date);
					if (this_.day == this_.selected[i].date) {
						this_.showList = this_.selected[i].clock_time;
						this_.dayStatus = this_.selected[i].status;
					}
				}
			}
		},
		mounted() {
			this.getData();
		}
	};
</script>

<style>
	.card {
		box-shadow: 0rpx 0rpx 21rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx;
	}

	/deep/ .uni-calendar-item__weeks-box-circle {
		background-color: #dccccc;
	}

	/deep/.uni-calendar__backtoday {
		display: none;
	}
</style>
